.sp-user {
	padding: 56rpx 60rpx 0;
	.back-color(#fff);

	&__ {

		&title {
			.font(46, 60, #222, left);
			margin-bottom: 16rpx;
		}

		&desc {
			.font(30, 42, #bbb, left);
			padding-bottom: 20rpx;
		}

		&submit {
			padding: 60rpx 10rpx 0;
		}

		&form {

			&- {
 
				&code {
					.f-center-space();
					margin-top: 115rpx;
					padding: 0 10rpx;

					input {
						.size(80, 120);
						border-bottom: 1px solid #ddd;
						.font(60, 120, #222);
						.transition();

						&:hover,
						&:focus {
							color: #6582F9;
							border-bottom-color: #6582F9;
						}
					}
				}

				&doget {
					margin-top: 40rpx;
					padding-right: 10rpx;
					.font(24, 44, #444, right);
				}

				&item {
					padding: 40rpx 0 0;
					border-bottom: 1px solid #eee;

					label,
					input {
						display: block;
					}

					label {
						.font(28, 40, #666, left);
					}

					input {
						height: 88rpx;
						.font(32, 88, #222, left);
					}
				}
			}

			& + .sp-user__submit {
				padding: 100rpx 10rpx 0;
			}
			
			// 验证码
			.u-code-input {
				width: 100%;
				height: 120rpx;
				justify-content: space-between;
			}
			
			.u-code-input__item {
				// flex: 1;
				width: 80rpx !important;
				height: 120rpx !important;
				.boxing();
				margin-right: 0 !important;
				
				text {
					// .font(60, 120, #222);
					border-bottom: 1px solid #ddd;
					font-size: 60rpx !important;
					line-height: 120rpx !important;
					color: #222 !important;
				}
				
				& > view {
					height: 1rpx !important;
					width: 100% !important;
					background-color: #ddd !important;
				}
			}
			
			.u-code-input__input {
				height: 120rpx !important;
				.transition();

				&:hover,
				&:focus {
					color: #6582F9;
					border-bottom-color: #6582F9;
				}
			}
		}

		&link {
			margin-top: 24rpx;
			.font(24, 44, #666, left);
		}

		&rule {
			display: flex;
			align-items: flex-start;
			padding: 100rpx 10rpx 0;

			&- {

				&check {
					position: relative;
					top: 4rpx;
					.square(30);
					background: url('@{cdn}user/check.png') center no-repeat;
					background-size: cover;
					margin-right: 10rpx;
					.transition();

					&.checked {
					background: url('@{cdn}user/checked.png') center no-repeat;
					background-size: cover;
					}
				}

				&info {
					flex: 1;
					flex-shrink: 1;
					flex-grow: 1;
					.font(24, 36, #666, left);

					text {
						color: #6582F9;
					}
				}
			}
		}

		&logo {
			padding: 100rpx 0 38rpx;

			image {
				display: block;
				.square(140);
				margin: 0 auto 32rpx;
			}

			text {
				display: block;
				.font(40, 66, #222, center);
			}
		}

		&cancel {
			margin-top: 50rpx;
		}

		&back {
			padding: 100rpx 0 0;
			.font(30, 42, #666);
		}
	}
}
